<template>
  <div>
    <el-dialog
      :model-value="dialogVisible"
      title="本期交易明细"
      center
      width="80%"
      @close="close"
    >
      <el-tabs
        v-if="dialogVisible"
        v-model="activeName"
        type="card"
        class="demo-tabs customTab"
      >
        <el-tab-pane label="本期流水" name="1"
          ><Assets
            :isStats="true"
            :type="0"
            :searchData="searchData"
            v-if="activeName == '1'"
        /></el-tab-pane>
        <el-tab-pane label="本期增加" name="2"
          ><Recharge
            :isStats="true"
            v-if="activeName == '2'"
            :type="1"
            :searchData="searchData"
        /></el-tab-pane>
        <el-tab-pane label="本期减少" name="3"
          ><Payment
            :isStats="true"
            v-if="activeName == '3'"
            :type="2"
            :searchData="searchData"
        /></el-tab-pane>
      </el-tabs>
    </el-dialog>
  </div>
</template>
<script setup>
import { ref } from "vue";
import Assets from "../../payassets/assetsRecords/index.vue";
import Recharge from "../../recharge/index.vue";
import Payment from "../../payment/orderList/index.vue";
const activeName = ref("1");
const props = defineProps({
  dialogVisible: {
    type: Boolean,
    default: false,
  },
  detailInfo: { type: Object, default: {} },
  searchData: { type: Object, default: {} },
});
const emits = defineEmits(["close"]);

const close = () => {
  emits("close");
};
</script>
<style lang="scss" scoped>
.textBody {
  margin: 2% 0;
}
.detailRow {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  margin: 2% 0;

  .rowName {
    min-width: 30%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
  }

  .rowValue {
    word-break: break-all;
    // text-align: right;
  }
}
</style>
